<template>
    <div class="work-atten">
        <div>
            <a-select class="work-atten-input" :options="deptSelectOption" v-model:value="deptValue"></a-select>
            <a-select class="work-atten-input" :options="options" v-model:value="selectData"
                @change="handleSelectChange"></a-select>
            <a-date-picker class="work-atten-input" v-model:value="month" :picker="pikerMode" />
            <a-button class="work-atten-button" @click="reseat">重置</a-button>
            <a-button class="work-atten-button" type="primary" @click="search">查询</a-button>
        </div>
        <div class="charts-div">
            <Bar :option="chartOptions" height="60vh" width="100%" />
        </div>
        <div class="charts-div flex-div">
            <div class="flex-div-item">
                <Bar :option="pieOptions" height="60vh" width="100%" />
            </div>
            <div class="flex-div-item">
                <Bar :option="dayAndNightOptions" height="60vh" width="100%" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue';
import Bar from '/@/components/chart/Bar.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { list,listAll } from './Attendance.api';
import { message } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import dayjs from 'dayjs';
const { getThemeColor } = useRootSetting();
let selectData = ref(1);
let month = ref(null)
let pikerMode = ref('month');
const deptSelectOption = ref([]);//部门下拉数据源
const chartOptions = ref({})//人员考勤累计时长
const pieOptions = ref({})//席位累计考勤时长
const dayAndNightOptions = ref({})//白夜班考勤时长
const deptValue = ref(null);//部门选择的数据
const userStore = useUserStore();
const options = ref([
    {
        value: 1,
        label: '月份',
    },
    {
        value: 2,
        label: '年份',
    }
])
onMounted(async () => {
    let result = await getDeptList();
    console.log("result==",result);
    
    if (result && result.length) {
        deptValue.value = result[0].value;
    }
    deptSelectOption.value = result;
    initData();
    queryData();

})

const seriesColor = computed(() => {
    return getThemeColor.value
})

const getDeptList = async () => {
    let result = await listAll();
    result = result.filter(item =>{
        return item.izLeaf !=0  && userStore.getLoginInfo?.userInfo?.orgCode == item.orgCode
    })
    let data = result.map(item => {
            return {
                label: item.departName,
                value: item.orgCode
            }
        
    })
    return data
}
/**
 * select 的值变化函数
 * @param v 
 */
const handleSelectChange = (v) => {
    console.log(v);
    if (v == 1) {
        pikerMode.value = 'month'
    } else {
        pikerMode.value = 'year'
    }
}

/**
 * 人员考勤累计时长
 */
const queryData = async () => {
    if(!month.value){
        message.error("请选择时间！");
        return;
    }
    try {
        let mouthData = ""
        if(pikerMode.value == 'month'){
            mouthData = dayjs(month.value).format('YYYY-MM')
        }else{
            mouthData = dayjs(month.value).format('YYYY')
        }
        let result = await list({
            orgCode: deptValue.value,
            queryDate: mouthData
        });
        let x = [];
        let data = [];
        if (result && result.userVOList) {
            for (const item of result.userVOList) {
                x.push(item.name);
                data.push(item.num);
            }
        }
        chartOptions.value = {
            title: {
                text: '人员考勤累计时长TOP10',
                // textStyle: { 
                //     fontWeight: 'lighter' 
                // }
            },
            tooltip: {
                formatter: '{b0}<br>考勤时长: {c0}时'
            },
            xAxis: {
                type: 'category',
                data: x
            },
            yAxis: {
                axisLabel: {
                    formatter: '{value}时'
                },
                type: 'value'
            },
            barWidth: 40,
            legend: {
                type: 'plain'
            },
            series: [
                {
                    type: 'bar',
                    name: '考勤时长',
                    data: data,
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}时'
                    },
                    color: "#477bff"
                }
            ]

        }
        getSeatStatic(result.seatVOList);
        getDayAndNight(result.classVOList)
    } catch (error) {

    }
}
/**
 * 席位累计考勤时长
 */
const getSeatStatic = (result = []) => {
    let data = [];
    for (const item of result) {
        data.push({
            name: item.name,
            value: item.num
        });
    }
    pieOptions.value = {
        title: {
            text: '席位累计考勤时长',
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            bottom: 'bottom'
        },
        series: [
            {
                name: '席位累计考勤时长',
                type: 'pie',
                radius: '50%',
                data: data,
                label: {
                    formatter: '{b}\n\n{c}时',
                    minMargin: 5,
                    fontSize: 14
                },
            }
        ]
    };
}
const getDayAndNight = (result = []) => {
    let dayData = [];//白班时长
    let nightData = [];//夜班时长
    let x = [];
    for (const item of result) {
        dayData.push(item.dayTimeNum);
        nightData.push(item.nightTimeNum);
        x.push(item.name);
    }
    dayAndNightOptions.value = {
        title: {
            text: '白班/夜班累计考勤时长',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            formatter: '{b0}<br>考勤时长: {c0}时'
        },
        xAxis: {
            type: 'value',

        },
        yAxis: {
            axisLabel: {
                formatter: '{value}'
            },
            type: 'category',
            data: x
        },
        barWidth: 40,
        legend: {
            type: 'plain'
        },
        series: [
            {
                type: 'bar',
                name: '白班考勤',
                data: dayData,
                stack: 'total',
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}时'
                },
                color: "#477bff"
            },
            {
                type: 'bar',
                name: '夜班考勤',
                stack: 'total',
                data: nightData,
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}时'
                },
                color: "#47d1cb"
            }
        ]

    }

}
const initData = () => {
    pikerMode.value = 'month';
    if (deptSelectOption.value && deptSelectOption.value.length) {
        deptValue.value = deptSelectOption.value[0].value;
    }
    selectData.value = 1;
    month.value = dayjs();
}
/**
 * 重置
 */
const reseat = () => {
    initData()
    queryData()
}
/**
 * 查询
 */
const search = () => {
    queryData()
}

</script>
<style lang="less" scoped>
html[data-theme='dark'] {
    .work-atten {
        background-color: #000;
    }
}

.work-atten {
    padding: 20px;
    background-color: #fff;

    &-input {
        margin-right: 20px;
        width: 200px;
    }

    &-button {
        margin-right: 20px;
    }

    .charts-div {
        margin-top: 40px;
    }

    .flex-div {
        display: flex;

        .flex-div-item {
            flex: 1;
        }
    }
}
</style>